<template>
  <el-container>
    <el-header style="height:100px;">
      <el-form :inline="true" style="margin-top: 20px">
        <el-form-item label="发送时间">
          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="queryObject.parameters.title" placeholder="关键字" clearable @clear="clearConditions" ></el-input>
        </el-form-item>
        <el-form-item label="消息组">
          <el-input v-model="queryObject.parameters.groupName" placeholder="消息组" clearable @clear="clearConditions" ></el-input>
        </el-form-item>
        <el-form-item label="消息接收人">
          <el-input v-model="queryObject.parameters.receiver" placeholder="消息接收人" clearable @clear="clearConditions" ></el-input>
        </el-form-item>
        <el-form-item label="模板">
          <el-input v-model="queryObject.parameters.templateName" placeholder="模板" clearable @clear="clearConditions" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" v-on:click="searchData"></el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table height="100%" :data="dataTable.result" border style="width: 100%" @row-dblclick="rowDbClick" highlight-current-row>
        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" @click="item(scope.row)" :title="scope.row.title">{{ scope.row.title }}</el-button>
            <br>
            {{ scope.row.sendTime }}
          </template>
        </el-table-column>
        <el-table-column prop="groupName" label="消息组/发件账户" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.groupName }}
            <br>
            {{ scope.row.senderName }}
          </template>
        </el-table-column>
        <el-table-column prop="receiverName" label="收件人" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="templateName" label="模板名" width="100"></el-table-column>
      </el-table>
    </el-main>
    <!--底部分页-->
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount" ></el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      queryObject: {
        pageIndex: 1,
        pageSize: 20,
        sortFields: {
          SendTime: true,
        },
        parameters: {
          title: '',
          templateName: '',
          groupName: '',
          receiver: '',
          beginTime: null,
          endTime: null
        }
      },
      dataTable: {
        columns: [],
        result: [],
        pageCount: 0,
        rowCount: 0,
      }
    };
  },
  computed: {
    dateRange: {
      get(){
        if (this.queryObject.parameters.beginTime && this.queryObject.parameters.endTime)
          return [this.queryObject.parameters.beginTime, this.queryObject.parameters.endTime];
        else
          return [];
      },
      set(val){
        if (val && val.length > 0){
          this.queryObject.parameters.beginTime = val[0];
          this.queryObject.parameters.endTime = val[1];
        }
        else{
          this.queryObject.parameters.beginTime = null;
          this.queryObject.parameters.endTime = null;
        }
      }
    }
  },
  mounted() {
    this.query();
  },
  methods:{
    query() {
      this.$service.message.query({ data: this.queryObject })
        .then((response) => {
          if (response.success)
            this.dataTable = response.data;
        });
    },
    searchData() {
      this.query();
    },
    clearConditions(){
      this.queryObject.parameters = {
        title: '',
        templateName: '',
        groupName: '',
        receiver: '',
        beginTime: null,
        endTime: null
      };
    },
    item(row){
      this.$router.push({ name: "messageItem", params: {id: row.messageId} });
    },
    rowDbClick(row, column, event) {
      this.item(row);
    }
  }
};
</script>
